<div class="has-text-weight-bold has-text-light center">
  <h1 class="title has-text-light has-text-weight-bold">Sign up</h1>
</div>
<div class="has-text-weight-bold has-text-light center">
  <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>
  <div class="field ">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>
  <div class="field">
    <%= f.label :first_name %><br />
    <%= f.text_field :first_name, autocomplete: "First Name" %>
  </div>
  <div class="field">
    <%= f.label :last_name %><br />
    <%= f.text_field :last_name, autocomplete: "Last Name" %>
  </div>
  <div class="field">
    <%= f.label :username, "User Name" %><br />
    <%= f.text_field :username, autocomplete: "User Name" %>
  </div>
  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "new-password" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
  </div>
  <div class="buttons">
    <div class="actions">
      <%= f.submit "Sign up", :class => "button center is-primary has-text-dark has-text-weight-bold"%>
    </div>
    <a> </a>
    <div class="button center is-outlined is-primary">
      <a class="has-text-light has-text-weight-bold center" href="/users/sign_in">Sign In</a>
    </div>
  </div>
  <% end %>
</div>